
<link rel="stylesheet" href="/assets/home/css/details.css">
<!-- 加载ckplayer视频插件 -->
<script src="/assets/home/plugin/ckplayer/ckplayer.min.js"></script>

<style>
    #cover{
        position: relative;
    }
    #play{
        height: 100%;
        line-height: normal;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #play img{
        max-width: 140px;
        max-height: 140px;
        min-width: 50px;
        min-height: 50px;
        cursor: pointer;
    }
</style>


<body>
    <div id="cover">
        <!-- 课程封面 -->
        <img class="cover_bg" src="{$subject.thumbs_text}">
        <!-- 中间播放键 -->
        <div id="play">
            <img src="/assets/home/images/play.png" />
        </div>
    </div>

    <!-- ckplayer视频容器元素 -->
    <div id="video"></div>

    <!-- 课程信息 -->
    <div class="head">
        <div class="info">
            <h4 class="name">基础语法</h4>
            <div class="action">
                {if condition="$subject.isLike"}
                <!-- 点赞 -->
                <img id="like" class="thumbs" src="/assets/home/images/thumbs-up.png" alt="">
                {else/}
                <!-- 未点赞 -->
                <img id="like" class="thumbs" src="/assets/home/images/thumbs.png" alt="">
                {/if}
                
                <span class="num">{$subject.likes_text}</span>
            </div>
        </div>
    </div>

    <div class="title">课程章节</div>
    <table class="list">
        <tr>
            <td>课程名称</td>
            <td>{$subject.title}</td>
        </tr>
        <tr class="price">
            <td>课程价格</td>
            <td>￥{$subject.price}元</td>
        </tr>
        <tr>
            <td>发布时间</td>
            <td>{$subject.createtime_text}</td>
        </tr>
        <tr>
            <td>章节总数</td>
            <td>{$chapter|count}小节</td>
        </tr>
    </table>

    <div class="title">课程介绍</div>
    <div class="mui-table-view content">{$subject.content}</div>

    <div class="title">课程章节</div>
    <ul class="mui-table-view" id="chapter">
        {if condition="$chapter"}
            {foreach $chapter as $k => $v}
                <li class="item mui-table-view-cell" data-cid="{$v.id}">第{$k + 1}节 - {$v.title}</li>
            {/foreach}
        {else/}
            <li class="mui-table-view-cell">暂无课程章节</li>
        {/if}
    </ul>

    <div class="title">用户评论</div>

    <!-- 评论内容 -->
    {if condition="$comment"}
        <ul class="mui-table-view">
            {foreach $comment as $k => $v}
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left userimg" src="{$v.business.avatar_text}">
                        <div class="mui-media-body">
                            {$v.business.nickname ? $v.business.nickname : '匿名'}
                            <p class='mui-ellipsis'>{$v.content}</p>
                        </div>
                    </a>
                </li>
            {/foreach}
        </ul>
        
        {if condition="$hasMoreComments"}
            <div class="more">
                <a href="{:url('home/index/commentList')}" class="mui-btn mui-btn-primary mui-btn-outlined">查看更多评论</a>
            </div>
        {/if}
    {else/}
    <ul class="mui-table-view">

        <li class="mui-table-view-cell">暂无评论</li>
    </ul>
    {/if}

    

    <!-- 弹出菜单 -->
    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a id="buy" href="javascript:void(0)">
                    立即购买
                </a>
            </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#sheet1"><b>取消</b></a>
            </li>
        </ul>
    </div>

    <!-- 底部 -->
    {include file="common/menu" /}
</body>

<script>
    const subid = `{$subject.id}`
    let cid = 0

    // 播放器实例
    let player = null

    // 章节切换
    $('#chapter .item').click(function(){
        cid = $(this).data('cid')

        $(this).css('color', 'blue').siblings().css('color','black')

        $("#video").css("display","none")
        $("#cover").css("display","block");
        
        if(player)
        {
            player.videoPause()
        }
    })

    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })

    // 点击播放
    $("#play").on('click', function () {
        $.ajax({
            url: "{:url('home/index/play')}",
            type: 'post',
            data: {subid, cid},
            dataType: 'json',
            success(res){
                console.log(res);
                if(res.code === 0){
                    mui.toast(res.msg)
                    return false
                }

                const data = res.data

                // 没买的
                if(data.hasOwnProperty('status') && data.status === 'buy'){
                    Paydata()
                    return false
                }
                
                play(data)
            }
        })


        // Paydata()
    })

    function Paydata() {
        mui('#sheet1').popover('toggle');
    }

    // 买课程
    $("#buy").on('click', function () {
        mui('#sheet1').popover('toggle');
        var btnArray = ['否', '是'];
        mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
            if (e.index = 1) {
                $.ajax({
                    url: `{:url('home/index/buy')}`,
                    type: 'post',
                    data: {subid},
                    dataType: 'json',
                    success(res){
                        mui.toast(res.msg)

                        if(res.code === 0){
                            return false
                        }

                        setTimeout(()=>{
                            location.reload()
                        }, 500)
                    }
                })
            }
        })
    })

    $('#like').click(()=>{
        $.ajax({
            type: 'post',
            url: '/home/index/like',
            data:{subid},
            dataType: 'json',
            success(res){
                mui.toast(res.msg, {duration: 500})

                setTimeout(() => {
                    location.reload()
                }, 500)
            },
            error(err){
                console.log(err);
            }
        })
    })

    // 播放方法
    function play(data){
        console.log(data);

        $("#video").css("display","block")
        $("#cover").css("display","none");

        player = new ckplayer({
            container: '#video', //容器
            video: data.url, //播放地址
            autoplay: true,//是否自动播放
            webFull:true,//是否启用页面全屏按钮，默认不启用
            theatre:true,//是否启用剧场模式按钮，默认不启用
            controls:true,//是否显示自带控制栏
            rightBar:true,//是否开启右边控制栏
            smallWindows:true,//是否启用小窗口模式
            smallWindowsDrag:true,//小窗口开启时是否可以拖动
            screenshot:true,//截图功能是否开启
            playbackrateOpen:true,//是否开启控制栏倍速选项
            playbackrateList:[0.75,1,1.25,1.5,2,4],//倍速配置值
            timeScheduleAdjust:1,//是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
        })

        console.log(player);
    }

</script>